<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>退款管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        style="width:280px;"
        placeholder="请输入用户姓名"
        class="search"
        v-model="searchData"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
          >搜索</el-button
        >
      </el-input>
      <div class="imp_div">
        <label for="selfile">
          <span class="imp_data">导入已退款</span>
          <!-- <el-button type="primary" @click="$refs.upfile.click()">导入已退款</el-button> -->
          <input type="file" ref="upfile" id="selfile" @change="submitFile" />
        </label>
        <!--  @click="impOut" -->
        <!-- <span class="imp_data" @click="impOut">导出需退款</span> -->
        <el-button type="primary" @click="impOut" :loading="impOutStatus"
          >导出需退款</el-button
        >
      </div>
      <!-- 数据列表 -->
      <el-table :data="tableData" border style="width: 100%" fit>
        <el-table-column type="index" label="#" width="75"></el-table-column>
        <el-table-column
          prop="refund_number"
          label="订单编号"
        ></el-table-column>
        <!-- <el-table-column prop="users_name" label="订单金额"></el-table-column> -->
        <el-table-column prop="users_name" label="姓名"></el-table-column>
        <el-table-column prop="users_phone" label="联系电话"></el-table-column>
        <!-- <el-table-column prop="status_title" label="退单退款发起人"></el-table-column> -->
        <el-table-column prop="reason" label="退单退款原因"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">未审核</el-tag>
            <el-tag type="warning" v-if="scope.row.status == 2">退款中</el-tag>
            <el-tag type="success" v-if="scope.row.status == 3">已退款</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 4">驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="审核"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="success"
                @click="showReviewPage(scope.row)"
              >
                <i class="el-icon-edit" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>

      <el-dialog title="退单审核" :visible.sync="isShowReviewPage" width="50%">
        <div v-if="ShowReviewPageData" class="order">
          <div>
            <label>订单编号：</label><span>{{ ShowReviewPageData.id }}</span>
          </div>
          <div>
            <label>订单创建时间：</label
            ><span>{{ ShowReviewPageData.created_at }}</span>
          </div>
          <div>
            <label>user_id:</label><span>{{ ShowReviewPageData.user_id }}</span>
          </div>
          <div>
            <label>编号：</label
            ><span>{{ ShowReviewPageData.refund_number }}</span>
          </div>
          <div>
            <label>原因:</label><span>{{ ShowReviewPageData.reason }}</span>
          </div>
          <!-- <div class="radio">
            <el-radio v-model="ShowReviewPageData.type" label="1" disabled
              >未审核</el-radio
            >
            <el-radio v-model="ShowReviewPageData.type" label="-1" disabled
              >已审核</el-radio
            >
          </div> -->
          <div style="height: 300px;">
            <el-steps
              direction="vertical"
              :active="ShowReviewPageData.status"
              finish-status="success"
            >
              <el-step title="未审核"></el-step>
              <el-step title="退款中"></el-step>
              <el-step title="已退款"></el-step>
              <el-step title="驳回"></el-step>
            </el-steps>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowReviewPage = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleEdit(ShowReviewPageData)"
            v-if="ShowReviewPageData && ShowReviewPageData.type == '1'"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 导出excel 插件 -->
      <download-excel :data="excel_data" class="import_excel">
        Download Data
        <img ref="import_excel" />
      </download-excel>
    </el-card>
  </div>
</template>

<script>
import { get, post } from "../../../../public/API/query";
import config from "../../../../public/config";

export default {
  data() {
    return {
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      currentPage4: 1,
      searchData: "",
      value: [],
      treeData: [],
      addGroupForm: {
        title: "",
      },
      //默认选择节点ID数组
      defaultKeys: [],
      isDisabled: false,
      userId: "",
      isShowReviewPage: false,
      orderID: "",
      // 审核页渲染数据
      ShowReviewPageData: null,
      // 导出excel表
      excel_data: [],
      // 导出按钮 loading状态
      impOutStatus: false,
    };
  },
  methods: {
    impOut() {
      this.impOutStatus = true;
      get("finance/refund/export", {}, (res) => {
        // 测试导出excel功能
        // console.log(this.excel_data);
        console.log(res);
        this.impOutStatus = false;
        this.excel_data = res;
        this.$refs.import_excel.click();
        if (typeof res === "string") {
          // this.$message.success(res);
        } else {
        }
      });
    },
    submitFile() {
      if (this.$refs.upfile.files[0]) {
        var file = this.$refs.upfile.files[0];
        var filename = file.name.split(".");
        var fileType = filename[filename.length - 1];
        if (fileType != "xls") {
          this.$message.error("只能上传.xls文件");
        } else {
          var formData = new FormData();
          formData.append("file", file);
          post("finance/refund/import", formData, (res) => {
            if (res.code == 200) {
              this.$refs.upfile.value = "";
              this.$message.success("导入成功");
            }
          });
        }
      }
    },
    // 审核页
    showReviewPage(value) {
      console.log(value);
      this.orderID = value.order_id;
      this.isShowReviewPage = true;
      get("finance/refund/reviewPage", { id: value.order_id }, (res) => {
        this.ShowReviewPageData = res.data[0];
        var type = this.ShowReviewPageData.status == 1 ? "1" : "-1";
        // this.ShowReviewPageData.type= type;
        this.$set(this.ShowReviewPageData, "type", type);
      });
    },
    // 审核提交
    subReview() {},
    //提交权限按钮
    commitRightsBtn() {},
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData();
    },
    //获取数据
    getTableData() {
      if (this.searchData) {
        get(
          "finance/refund/index",
          {
            p: this.p,
            limit: this.limit,
            title: this.searchData,
          },
          (res) => {
            this.tableData = res.data._list;
            this.excel_data = res.data._list;
            this.count = res.data.count;
          }
        );
      } else {
        get(
          "finance/refund/index",
          {
            p: this.p,
            limit: this.limit,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;

            // 测试导出excel 功能
            this.excel_data = res.data._list;
          }
        );
      }
    },
    //审核提交
    handleEdit(data) {
      // return this.$message("wait");

      get(
        "finance/refund/subReview",
        {
          id: data.order_id,
          type: data.status,
        },
        (res) => {
          if (res.code == 200) {
            this.$message.success("审核成功！");
            data.type = "-1";
          }
          console.log(res);
        }
      );
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
input[type="file"] {
  outline: none;
  width: 200px;
  display: none;
}
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin-bottom: 30px;
  width: 280px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.imp_div {
  display: inline-block;
  float: right;
  .imp_data {
    padding: 10px 30px;
    background: #409eff;
    color: #fff;
    margin: 0 20px;
    border-radius: 5px;
  }
}
.order {
  padding: 0 20px;
  & label {
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
  }
  & > div {
    margin: 20px 10px;
  }
  .radio {
    margin-top: 35px;
    padding: 0 20px;
    display: flex;
    justify-content: space-around;
  }
}
.import_excel {
  display: none;
}
</style>
